<template>
  <div>
    <div class="ll-box">
      <div class="ll-left">
        <goods
          v-for="(i,index) in datas"
          :key="index"
          :index="index"
          :disvior="disvior"
          :item="i"
          @status="add"
        ></goods>
      </div>
      <div class="ll-right" ref="container" @touchstart="Touch">
        <div v-for="(item,index) in section" :key="index" ref="iscrolltas">
          <!-- <div class="ll-tit">{{item.anchor_point}}</div> -->
          <div class="ll-right-section" v-for="(i,index) in item.commodity_list" :key="index">
            <img :src="i.comm_image" />
            <div>
              <div>
                <b>{{i.comm_title}}</b>
              </div>
              <div style="color:#ccc;font-size:12px">销量{{i.fabulous}}</div>
              <div class="ll-footer">
                <span>￥{{i.comm_price}}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import goods from "../components/goods";
import axios from "axios";
export default {
  components: {
    goods,
  },
  data() {
    return {
      datas: [],
      section: [],
      disvior: 0,
    };
  },
  methods: {
    add(val) {
      this.disvior = val;
      this.$refs.container.removeEventListener("scroll", this.serve);
      var acionviews = this.$refs.iscrolltas;
      var target = acionviews[this.disvior];
      // console.log(target)
      target.scrollIntoView({ behavior: "smooth" });
    },
    serve() {
      let target = event.target;
      // console.log(target)
      let scroleft = target.scrollTop;
      let scroviews = this.$refs.iscrolltas;
      for (var i = 0; i < scroviews.length; i++) {
        if (
          scroleft >= scroviews[i].offsetTop &&
          scroleft < scroviews[i + 1].offsetTop
        ) {
          this.disvior = i;
        }
      }
    },
    Touch() {
      this.$refs.container.addEventListener("scroll", this.serve);
    },
  },
  mounted() {
    axios.get("http://localhost:8080/shoplist.json").then((res) => {
      this.datas = res.data;
      this.section = res.data;
    });
    console.log(this.$refs.container)
    this.$refs.container.addEventListener("scroll", this.serve);
  },
};
</script>

<style scoped>
.ll-box {
  width: 100%;
  height: 80vh;
  /* border: 1px solid; */
  display: flex;
}
.ll-left {
  width: 25%;
}
.ll-right {
  overflow: scroll;
  width: 75%;
}
.ll-right-section {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  margin-top: 10px;
}
.ll-right-section img {
  border-radius: 8px;
  width: 100px;
  height: 100%;
}
.ll-right-section div {
  margin-left: 10px;
  margin-bottom: 8px;
}
.ll-footer {
  display: flex;
  justify-content: space-between;
}
.ll-tit {
  width: 100%;
  height: 30px;
  text-align: center;
  line-height: 30px;
}
</style>
